<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<base href="/managerSystem/view/">
		<!-- vue框架： 视图的双向绑定 -->
		<script type="text/javascript" src="js/vue-2.6.10.js"></script>
		<!--  axios: 进行异步请求（数据来源与网页脱离） -->
		<script type="text/javascript" src="js/axios.js"></script>
		<link rel="stylesheet" href="css/nav.css">
		<link rel="stylesheet" href="css/users.css">
		
	</head>
	<body>
		<div class="all">
			<div id="container">
				<header>
					<div class="logo" id="h">
						<a href="index.html">
							<img src="images/nav/logo.png" alt="">
						</a>
					</div>
					<nav>
						<strong>
							<ul>
								<li>
									<a href="index.html">首页</a>
								</li>
								<li>
									<a href="#">今日推荐⇩</a>
									<ol>
										<li>
											<div class="jrtj">
												<img src="images/nav/jrtj.jpg" alt="">
											</div>
										</li>
									</ol>
								</li>
								<li>
								<a href="login.html">请登录</a>
							</li>
							<li> 
								<a href="register.html">免费注册</a>
							</li>
							<li>
								<a href="orders.html">我的商品</a>
							</li>
							<li>
								<a href="users.html">我的账户</a>
							</li>
								<li>
									<a href="#">更多⇩</a>
									<ol>
										<li>
											<a href="">联系我们</a>
										</li>
									</ol>
								</li>
							</ul>
						</strong>
		       		</nav>
		    	</header>
				<div class="content">
					<div class="content1">
						<div class="tp">
							<img src="images/user.jpg" alt="">
						</div> 
						<div class="user">
							<div class='border'>
								<h1>用户信息</h1>
								<div class="box">
									<table id="app">
										<thead>
											<tr>
												<th>用户id</th>
												<th>用户名</th>
												<th>年龄</th>
												<th>性别</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="u in users">
												<td>{{u.id}}</td>
												<td>{{u.username}}</td>
												<td>{{u.age}}</td>
												<td>{{u.gender}}</td>
												<td>
													<a :href="'updateUser.html?id='+u.id">修改</a>
													<a href="javascript:void(0);" v-on:click="delUser(u.id)">删除</a>
												</td>
											</tr>
										</tbody>
									</table>
									<script type="text/javascript">
											let vue = new Vue({
												el: '#app',
												data:{
													users: []
												},
												created(){
													//url: 表示异步请求地址
													axios.get('/managerSystem/selectUser.do').then(
														function(res_obj){
															//使用获取的数据来给vue对象中的users数据赋值
															vue.users = res_obj.data; 
														}
													).catch(
														function(error_obj){
															alert("网络加载异常！！！");
														}
													)
												},
												methods:{
													delUser: function(id){
														console.log(id);
														//url: 表示异步请求地址
														axios.get('/managerSystem/deleteUser.do?id=' + id).then(
															function(res_obj){
																//使用获取的数据来给vue对象中的users数据赋值
																//vue.users = res_obj.data; 
																window.location.href="users.html";
															}
														).catch(
															function(error_obj){
																alert("网络加载异常！！！");
															}
														)
													}
												}
											});
										</script>
								</div>
							</div>
							<a href="adduser.html" style="text-decoration: none;"><h1>增加用户</h1></a>
						</div>
					</div>
				</div>
			<footer>
				<div class="footer1">
					<img src="images/nav/logo.png" alt="">
				</div>
				<a href="#h"><span>⇧返回顶部</span></a>
				<div class="footer3">
					<a href=""><img src="images/nav/f1.png" alt=""></a>
					<a href=""><img src="images/nav/f2.png" alt=""></a>
					<a href=""><img src="images/nav/f3.png" alt=""></a>
					<a href=""><img src="images/nav/f4.png" alt=""></a>
				</div>
				<div class="footer2">
					<a href="">
						<h4></h4>
					</a>
				</div>
			</footer>
		</div>
	</body>
</html>